<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        /* 1. 超小屏幕下，小于768px时，布局容器宽度为100% */
        @media screen and (max-width: 767px){
            .container{
                width: 100%;
            }
        }

        /* 2. 小屏幕下，768px ~ 992px  , 布局容器宽度为750px*/
        @media screen and (min-width: 768px){
            .container{
                width: 750px;
            }
        }

        /* 3. 中等屏幕下, 992px ~ 1200px, 布局容器修改为970px */
        @media screen and (min-width: 992px){
            .container{
                width: 970px;
            }
        }

        /* 4. 大屏幕下, 1200px及以上, 布局容器修改为1170px */
        @media screen and (min-width: 1200px){
            .container{
                width: 1170px;
            }
        }
    </style>
</head>
<body>
    <!-- 
        响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
        原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
     -->
     <div class="container"></div>
</body>
</html>